<template>
	<div id="mapId"></div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { jsonParseStringfy } from "@/common/utils/GlobalUtils";
import mapJson from "./map.json";

const props = defineProps({
	mapData: {
		type: Array,
	},
	showInfo: {
		type: Boolean,
		default: true,
	},
});
let mapState = null;

const closeImg = require("@/assets/screenImg/commonImg/close.png");

let allPointsArr = [];
const initMarksAndInfo = (item) => {
	// 标记点
	const icon = item.src;
	const point = new BMap.Point(item.lng, item.lat);
	// 图标可视区域大小
	const iconSize = new BMap.Size(20, 24);
	const iconUrl = new BMap.Icon(icon, iconSize, {
		// 图标的定位点相对于图标左上角的偏移值
		anchor: new BMap.Size(0, 0),
		// 图标所用的图片的大小
		imageSize: iconSize,
		// 信息窗口开启位置相对于图标左上角的偏移值
		infoWindowAnchor: new BMap.Size(95, 130),
	});
	const marker = new BMap.Marker(point, {
		icon: iconUrl,
	});
	mapState.addOverlay(marker);

	if (props.showInfo) {
		// 标记点信息窗
		let msg = {
			total: item.total == undefined ? 0 : item.total,
			hireRate: item.hireRate == undefined ? 0 : item.hireRate,
			captureRate: item.captureRate == undefined ? 0 : item.captureRate,
			area: item.area == undefined ? 0 : item.area,
			limitArea: item.limitArea == undefined ? 0 : item.limitArea,
		};
		const markInfoText = [
			"<div class='screenMapInfoBox'>",
			"<div class='infoBox-header'>" + item.name + "</div>",
			"<div class='infoBox-content'>",
			"<div class='content-item'><span>商铺总数：" +
				msg.total +
				"个</span></div>",
			"<div class='content-item'><span>商铺出租率：" +
				msg.hireRate +
				"%</span></div>",
			"<div class='content-item'><span>商铺收缴率：" +
				msg.captureRate +
				"%</span></div>",
			"<div class='content-item'><span>已租面积：" +
				msg.area +
				"㎡</span></div>",
			"<div class='content-item'><span>闲置面积：" +
				msg.limitArea +
				"㎡</span></div>",
			"</div>",
		];
		const markInfoBox = new BMapLib.InfoBox(mapState, markInfoText.join(""), {
			enableAutoPan: true,
			closeIconMargin: "-5px -10px 0 0", // 关闭按钮边距
			closeIconUrl: closeImg, // 关闭按钮的图片url
			align: INFOBOX_AT_TOP,
			offset: new BMap.Size(0, 120),
		});
		marker.addEventListener("click", () => {
			// 点击标注显示信息窗体
			markInfoBox.open(marker);
		});
	} else {
		marker.addEventListener("click", () => {
			// 点击标注放大
			let point = new BMap.Point(item.lng, item.lat);
			mapState.panTo(point);
			setTimeout(() => {
				mapState.setZoom(14.5);
			}, 500);
		});
	}
};
let initFun = () => {
	// 创建地图实例
	(!mapState) &&  (mapState = new BMap.Map("mapId", {
		enableMapClick: false, // 地图底图不可点击
		enableAutoResize: false,
	}));

	
	// 默认成都中心
	mapState.centerAndZoom(new BMap.Point(104.066, 30.663), 14);

	mapState.setMapStyleV2({
		styleJson: mapJson,
	});

	// 可以使用鼠标缩放地图
	mapState.enableScrollWheelZoom(true);

	// 监听缩放事件，让地图默认移动一下，解决缩放之后某些文字偏移问题
	mapState &&
		mapState.addEventListener("zoomend", (ev) => {
			mapState.panBy(0, 0);
		});
	mapState.clearOverlays();
	// console.log(props.mapData);
	props.mapData.map((item, i) => {
		const {lng, lat} =item
		if(lng && lat){
		initMarksAndInfo(item);
		let point = new BMap.Point(lng, lat);
		allPointsArr.push(point);
	}
	});
	// 根据提供的坐标设置地图视野
	let lile = jsonParseStringfy(allPointsArr);
	setTimeout(() => {
		mapState.setViewport(allPointsArr, { margins: [8, 8, 8, 8] });
	}, 500);
};

watch(
	() => props.mapData,
	(data, oldData) => {
		console.log("-----map  content-----");
		nextTick(() => {
			initFun();
		});
	},
	{
		deep: true,
	}
);
</script>
<style lang="scss" scoped>
#mapId {
	width: 100%;
	height: 100%;
}
</style>
<style lang="scss">
#mapId {
	.infoBox {
		img {
			width: 25px;
			height: 25px;
		}
		.screenMapInfoBox {
			background: url("@/assets/screenImg/propertyImg/center/ps2.png") no-repeat;
			background-size: 140% 111%;
			background-position: 35% 100%;
			padding: 10px 10px 60px 10px;
			color: #fff;
			text-shadow: 0px 0px 4px #fff;
			.infoBox-header {
				font-size: 18px;
				font-weight: 500;
				color: #c8e2ff;
				line-height: 27px;
				padding: 10px 40px 0 40px;
			}
			.infoBox-content {
				padding: 0 40px 0 60px;
				font-size: 14px;
				color: #c8e2ff;
				line-height: 21px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.content-item {
					padding: 5px 0;
					span {
						white-space: nowrap;
					}
				}
			}
		}
	}
	.BMap_cpyCtrl,
	.anchorBL {
		display: none;
	}
}
</style>
